<!--
 * @Author: 梁青春
 * @Date: 2025-11-06 15:08:02
 * @LastEditTime: 2025-11-06 16:50:33
 * @LastEditors: 梁青春
-->
<!--
  @Description: 时间选择网格面板（4列×6行）
  @Notes:
  - 一行4个，总共6行，共24个时间：01:00 ~ 24:00（与原型图三一致）
  - 通过 v-model 双向绑定选中的时间值
-->
<template>
  <div class="time-picker-grid">
    <!-- 触发器：只读输入框 + 下拉面板 -->
    <el-popover placement="bottom" width="400" trigger="click" v-model:visible="visible" :hide-on-click="false">
      <template #reference>
        <div style="width: 160px; text-align: center">
          {{ localValue }}
        </div>
      </template>

      <!-- 面板：网格项 -->
      <div class="grid">
        <el-button
          v-for="t in TIMES"
          :key="t"
          size="small"
          :type="t === localValue ? 'primary' : 'default'"
          class="grid-item"
          @click="selectTime(t)"
        >
          {{ t }}
        </el-button>
      </div>
    </el-popover>
  </div>
</template>

<script setup name="TimePickerGrid">
import { ref, watch } from 'vue'

// v-model 双向绑定
const props = defineProps({
  modelValue: { type: String, default: '' }
})
const emits = defineEmits(['update:modelValue'])

const visible = ref(false)
const localValue = ref(props.modelValue || '')

watch(
  () => props.modelValue,
  v => (localValue.value = v || '')
)

// 时间常量：01:00 ~ 24:00（24 项）
const TIMES = Array.from({ length: 24 }, (_, i) => String(i + 1).padStart(2, '0') + ':00')

function selectTime(t) {
  // 关键节点：更新本地与对外值，并关闭面板
  localValue.value = t
  emits('update:modelValue', t)
  visible.value = false
}
</script>

<style scoped>
.grid {
  display: grid;
  /* 固定列宽，彻底消除因自适应带来的像素取整而“看起来不对齐”问题 */
  grid-template-columns: repeat(4, 88px);
  gap: 8px; /* 统一列间距 */
  justify-content: space-between; /* 四列均匀分布并左右对齐 */
}
.grid-item {
  width: 88px; /* 与列宽一致，确保整齐对齐 */
  box-sizing: border-box; /* 保证边框与内边距不改变宽度 */
  text-align: center; /* 按钮文字居中 */
  padding: 4px 8px; /* 适配宽度的内边距 */
  margin: 0;
}
</style>
